<template>
    <div v-show="show" class="container">
        <div class="box">
            <div class="title">提示</div>
            <div class="content">
                <img class="warn-img" src="@/assets/img/warning.png" alt="">
                尊敬的家长，此模块充值为校园消费一卡通充值，非电子学生证套餐充值入口，请认真确认后操作，谢谢。
            </div>
            <div @click="close" class="close-btn">关闭</div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            show: true
        }
    },
    methods: {
        close(){
            this.show = false
        }
    }
}
</script>
<style scoped>
.container{
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
}
.box{
    width: 5.94rem; height: 4.44rem; background: #fff; border-radius: 0.15rem;
    margin: 50% auto 0 auto;
}
.title{
    font-size: 0.32rem; text-align: center; color: #666;
    padding: 0.4rem 0;
}
.content{
    width: 4.2rem; margin: 0 auto;
    color: #010101; font-size: 0.3rem;
    position: relative;
}
.warn-img{
    width: 0.3rem; position: absolute; top: 0; left: -0.4rem;
}
.close-btn{
    width: 2.4rem; height: 0.76rem; line-height: 0.76rem; border-radius: 0.38rem;
    text-align: center; color: #fff; background: #128FEF;
    margin: 0.4rem auto 0 auto;
}
</style>